<template>
  <div class="indexPage">
    <SearchBarVue class="top"></SearchBarVue>
    <div class="mainCenter">
      <BannerSwiperVue></BannerSwiperVue>
      <NavBarVue></NavBarVue>
      <SecondKillVue></SecondKillVue>
      <GoodsListVue></GoodsListVue>
    </div>
    <FooterBarVue class="fot"></FooterBarVue>
  </div>
</template>

<script>
import BannerSwiperVue from "@/components/BannerSwiper.vue";
import FooterBarVue from "@/components/FooterBar.vue";
import GoodsListVue from "@/components/GoodsList.vue";
import NavBarVue from "@/components/NavBar.vue";
import SearchBarVue from "@/components/SearchBar.vue";
import SecondKillVue from "@/components/SecondKill.vue";
export default {
  name: "Home",
  components: {
    BannerSwiperVue,
    FooterBarVue,
    GoodsListVue,
    NavBarVue,
    SearchBarVue,
    SecondKillVue,
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.indexPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainCenter {
  flex: 1;
  overflow: auto;
}
.fot,
.top {
  height: 3rem;
}
.fot{
  color: black;
}
</style>